<template>
  <div 
    class="poi-marker"
    :class="[`marker-${poi.type}`, { active: poi.status === 'active', alert: poi.hasAlert }]"
    :style="{ left: poi.x + '%', top: poi.y + '%' }"
    @mouseenter="handleHover"
    @mouseleave="handleLeave"
    @click="handleClick"
  >
    <div class="marker-icon">
      <svg viewBox="0 0 24 24">
        <path :d="getMarkerIcon(poi.type)" fill="currentColor"/>
      </svg>
    </div>
    
    <div class="marker-pulse" v-if="poi.status === 'active'"></div>
    
    <div class="marker-label" v-if="showLabel">
      {{ poi.name }}
    </div>

    <!-- 状态指示器 -->
    <div class="status-indicator" v-if="poi.hasAlert">
      <div class="alert-dot"></div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  poi: {
    type: Object,
    required: true
  },
  activeType: {
    type: String,
    default: 'scenic'
  },
  showLabel: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['marker-hover', 'marker-click', 'marker-leave'])

const getMarkerIcon = (type) => {
  const icons = {
    scenic: 'M12,2L13.09,8.26L17,7L14.94,9.06L19,12L14.94,14.94L17,17L13.09,15.74L12,22L10.91,15.74L7,17L9.06,14.94L5,12L9.06,9.06L7,7L10.91,8.26L12,2Z',
    monitor: 'M4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H16V20A1,1 0 0,1 15,21H9A1,1 0 0,1 8,20V18H4A2,2 0 0,1 2,16V4A2,2 0 0,1 4,2M4,4V16H20V4H4M5,5H19A1,1 0 0,1 20,6V15A1,1 0 0,1 19,16H5A1,1 0 0,1 4,15V6A1,1 0 0,1 5,5M18.5,7A0.5,0.5 0 0,0 18,7.5A0.5,0.5 0 0,0 18.5,8A0.5,0.5 0 0,0 19,7.5A0.5,0.5 0 0,0 18.5,7Z',
    entrance: 'M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M19,19H5V5H19V19M17,17H7V15H17V17M17,13H7V11H17V13M17,9H7V7H17V9Z',
    hotel: 'M2,5V3H4V5H8V3H10V5H14V3H16V5H20V3H22V5H22V7H20V19H22V21H2V19H4V7H2V5M6,7V19H18V7H6M8,9H16V11H8V9M8,12H16V14H8V12M8,15H13V17H8V15Z',
    restaurant: 'M8.1,13.34L3.91,9.16C2.35,7.59 2.35,5.06 3.91,3.5L10.93,10.5L8.1,13.34M13.41,13L20.29,19.88L18.88,21.29L12,14.41L5.12,21.29L3.71,19.88L13.36,10.22L13.16,10C12.38,9.23 12.38,7.97 13.16,7.19L17.5,2.85L18.92,4.27L15.5,7.68L16.91,9.09L20.33,5.68L21.74,7.09L17.4,11.43C16.62,12.21 15.36,12.21 14.58,11.43L14.37,11.22L13.41,13Z',
    service: 'M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9Z',
    business: 'M19,7H18V6A2,2 0 0,0 16,4H8A2,2 0 0,0 6,6V7H5A1,1 0 0,0 4,8V19A3,3 0 0,0 7,22H17A3,3 0 0,0 20,19V8A1,1 0 0,0 19,7M8,6H16V7H8V6M18,19A1,1 0 0,1 17,20H7A1,1 0 0,1 6,19V9H18V19Z'
  }
  return icons[type] || icons.scenic
}

const handleHover = (event) => {
  emit('marker-hover', props.poi, event)
}

const handleClick = () => {
  emit('marker-click', props.poi)
}

const handleLeave = () => {
  emit('marker-leave')
}
</script>

<style scoped>
.poi-marker {
  position: absolute;
  width: 32px;
  height: 32px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
  animation: markerAppear 0.5s ease-out;
}

.poi-marker:hover {
  transform: translate(-50%, -50%) scale(1.2);
  z-index: 20;
}

.marker-icon {
  width: 32px;
  height: 32px;
  background: rgba(0, 255, 136, 0.1);
  border: 2px solid #00ff88;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00ff88;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
}

.marker-icon svg {
  width: 18px;
  height: 18px;
}

/* 不同类型标记的颜色 */
.marker-monitor .marker-icon {
  background: rgba(0, 188, 212, 0.1);
  border-color: #00bcd4;
  color: #00bcd4;
}

.marker-entrance .marker-icon {
  background: rgba(255, 171, 64, 0.1);
  border-color: #ffab40;
  color: #ffab40;
}

.marker-hotel .marker-icon {
  background: rgba(102, 187, 106, 0.1);
  border-color: #66bb6a;
  color: #66bb6a;
}

.marker-restaurant .marker-icon {
  background: rgba(255, 112, 67, 0.1);
  border-color: #ff7043;
  color: #ff7043;
}

.marker-service .marker-icon {
  background: rgba(156, 39, 176, 0.1);
  border-color: #9c27b0;
  color: #9c27b0;
}

.marker-business .marker-icon {
  background: rgba(121, 85, 72, 0.1);
  border-color: #795548;
  color: #795548;
}

/* 活跃状态 */
.poi-marker.active .marker-icon {
  background: rgba(0, 255, 136, 0.2);
  border-width: 3px;
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.4);
}

/* 预警状态 */
.poi-marker.alert .marker-icon {
  border-color: #ff4444;
  animation: alertPulse 2s ease-in-out infinite;
}

/* 脉冲效果 */
.marker-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  border: 2px solid #00ff88;
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

.marker-label {
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: #ffffff;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.poi-marker:hover .marker-label {
  opacity: 1;
}

/* 状态指示器 */
.status-indicator {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
}

.alert-dot {
  width: 100%;
  height: 100%;
  background: #ff4444;
  border-radius: 50%;
  animation: alertBlink 1s ease-in-out infinite;
}

/* 动画效果 */
@keyframes markerAppear {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes pulse {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(1.5);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2);
  }
}

@keyframes alertPulse {
  0%, 100% {
    border-color: #ff4444;
  }
  50% {
    border-color: #ffaaaa;
  }
}

@keyframes alertBlink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

/* 响应式设计 */
@media screen and (max-width: 1400px) {
  .poi-marker {
    width: 28px;
    height: 28px;
  }
  
  .marker-icon {
    width: 28px;
    height: 28px;
  }
  
  .marker-icon svg {
    width: 16px;
    height: 16px;
  }
  
  .marker-pulse {
    width: 28px;
    height: 28px;
  }
}
</style> 